<template>
	<view class="facex">
		<view class="containerx"><text class="loadingx"></text>
			<view class="caption"></view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	.facex {
		top: 40%;
		text-align: center;
		z-index: 9999999;

		.containerx {
			margin: auto;
			align-items: center;
			display: table;
			position: absolute;
			text-align: center;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.loadingx {
				width: 150px;
				display: block;
				height: 8px;
				margin: 18px auto;
				border-radius: .5rem;
				background-color: #151c26;
				position: relative;
				overflow: hidden;
				z-index: 1;

				&:before {
					content: '';
					height: 8px;
					width: 20px;
					position: absolute;
					transform: translate(-34px, 0);
					background-color: #ed1d49;
					border-radius: .5rem;
					animation: animationx 1.4s infinite ease;
				}
			}
		}

	}

	@media screen and (min-width: 768px) {
		.loadingx {
			width: 350px !important;
			height: 16px !important;
			margin: 20px auto !important;
		}

		.loadingx:before {
			width: 50px !important;
			height: 16px !important;
		}
	}

	@keyframes animationx {
		0% {
			/* left: 20% ; */
			transform: translateX(-15vw);
		}

		50% {
			/* left: 100% ; */
			transform: translateX(10vw);
		}

		100% {
			/* left: 20% ; */
			transform: translateX(-15vw);
		}
	}
</style>